<template>
    <div>
      <div class="topgoods">
        <el-input placeholder="输入相册名称搜索"
          v-model="queryData.keyword"
          clearable
          size='small'
          style="float:right;width:200px;">
          <i slot="suffix"
            class="el-input__icon el-icon-search"
            @click="searchRedpacket"></i>
        </el-input>

  
        <span>审核状态</span>
        <el-select v-model="queryData.status" placeholder="请选择状态"
              style="width:150px;margin:0 20px;"
              size='mini'>
            <el-option label="全部" :value='0'></el-option>
            <el-option label="待审核" :value='1'></el-option>
            <el-option label="展示中" :value='2'></el-option>
            <el-option label="已驳回" :value='3'></el-option>
        </el-select>
      </div>
      <div class="record_line"></div>
  
      <el-table :data="tableData"
        style="width:100%"
        max-height="680"
        :cell-style="tc"
        :header-cell-style="tccolor">
  
        <el-table-column prop="name"
          label="相片名称"
          width="160">
         
        </el-table-column>
        <el-table-column prop="amount"
          label="图片">
          <template slot-scope="scope">
            <div>
             
              <img :src="scope.row.picture" alt="" width="100" height="60" />
            </div>
          </template>
        </el-table-column>
  
  
        <el-table-column label='状态'
          width='120'>
          <template slot-scope="scope">
            <p v-if="scope.row.status == 0">全部</p>
            <p v-if="scope.row.status == 1">待审核</p>
            <p v-if="scope.row.status == 2">展示中</p>
            <p v-if="scope.row.status == 3">已驳回</p>
  
          </template>
        </el-table-column>
  
        <el-table-column label="上传日期" prop="createAt">

        </el-table-column>
        
        <el-table-column label="操作" fixed="right">
           <template slot-scope="scope">
             <p class="red_get_Detail" @click="getRedPacketDetail(scope.row)">审核</p>
           </template>
        </el-table-column>
        <!-- <el-table-column prop="phone"
          label="领取用户"
          width="240"></el-table-column>
          <el-table-column prop="invalid_time"
          label="领取时间"
          width="240"></el-table-column> -->
      </el-table>
  <!--
     @size-change="handleSizeChange" -->
      <el-col :span="24">
        <div class="pagination">
  
          <el-pagination background
            @current-change="pageChange"
            @size-change="handleSizeChange"
            :page-sizes="[15, 30, 50, 100]"
            :current-page="queryData.pageNum"
            :page-size="queryData.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total"></el-pagination>
        </div>
      </el-col>
  
      <jdialog title="相册审核" :visible.sync='isShowPacketRecord'>
        <el-form :model="form"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div style="padding-top: 30px;">
            
              <el-form-item label="审核意见:" class="examine">
                <el-input
                  v-model="form.note"
                  type="textarea"
                  style="width:450px;"
                  placeholder="请输入备注"
                  class="text-audit"
                >
                  <!-- <p class="note_back" slot="suffix">个</p> -->
                </el-input>
                <el-radio v-model="form.status" label="2">审核通过</el-radio>
                <el-radio v-model="form.status" label="3">审核驳回</el-radio>
                <div style="text-align:right;margin:20px 0; padding-right: 30px;">
                    <el-button size="mini" @click="isShowPacketRecord = false">取消</el-button>
                    <el-button size="mini" type="primary" @click="certainRenew">确定</el-button>
                  </div>
              </el-form-item>
            </div>
          </el-form>
  
      
      </jdialog>
    </div>
  </template>
  
  <script>
  // import {shopRedPacketSend,shopRedPacketReceiveUser} from '@/api/shopdetail'
  import {albumReviewPageList,albumReview} from '@/api/store'
  export default {
    props:['shopId','memberId'],
    data () {
      return {
        form:{
            note:'',
            status:''
        },
       status:'',
       type:'',
       phone:'',
        page:1,
        size:20,
        total:0,
        tableData: [],
        isShowPacketRecord:false,
  
        receivePage:1,
        receiveSize:20,
        receiveData:[],
        receiveTotal:0,
        currentId:'',
        queryData:{
          pageNum:1,
          pageSize:20,
          sellerId:this.shopId,
          keyword:''
        //   status:0
        }
      }
    },
     mounted (){
       this.getRedPacketRecord()
    },
    watch: {
        shopId(newValue){
          if(newValue){
            this.getRedPacketRecord()
          }
        },
        memberId(newValue){
          if(newValue){
            this.getRedPacketRecord()
          }
        }
    },
    methods: {
      async getRedPacketRecord(){
          if(this.status == ''){
              this.status = 0
          }
          if(this.type == ''){
              this.type = 0
          }
        // var url = "albumId="+this.queryData.id+
        //           "&status="+this.queryData+
        //           "&reason="+this.queryData

        let res = await albumReviewPageList(this.queryData)
        this.tableData = res.data.list
        this.total = res.data.total
      },
      getRedPacketDetail(row){
        this.currentId = row.id
        //   this.getshopRedPacketReceiveUserData(row.id)
        //   this.receiveData = row
          this.isShowPacketRecord = true
          this.form = row
      },
      async certainRenew(){
        // let data={
        //     albumId:this.currentId,
        //     status:this.form.status,
        //     reason:this.form.note
            
        // }
        var url = "albumId="+this.currentId+
                  "&status="+this.form.status+
                  "&reason="+this.form.note

        let res = await albumReview(url)
        if(res.code === 200){
           this.isShowPacketRecord = true
           this.$message.success(res.message)
           this.getRedPacketRecord()
           this.isShowPacketRecord = false
        }else{
          this.$message.error(res.message)
        }
      },
      receivepageChange(page){
        this.receivePage = page
        this.getshopRedPacketReceiveUserData(this.currentId)
      },
      async getshopRedPacketReceiveUserData(id){
        var url  = 'page='+this.receivePage+
                   '&size='+this.receiveSize+
                   '&id='+id
        let res = await listByRedPacketId(id)
        if(res.code === 200){
           this.isShowPacketRecord = true
           this.receiveData = res.data
           this.receiveTotal  = res.data.total
        }else{
          this.$message.error(res.message)
        }
      },
      tc () {
        return "text-align:center; color:#333333; font-size:12px;";
      },
      tccolor () {
        return "text-align:center;background-color:#f5f5f5; font-size:14px;";
      },
  
      searchRedpacket () {
        this.queryData.pageNum = 1
        this.getRedPacketRecord(this.shopId)
      },
        pageChange(page) {
        this.queryData.pageNum = page;
         this.getRedPacketRecord(this.shopId)
      },
      handleSizeChange(val) {
        this.queryData.pageSize = val;
        this.pageChange(1);
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .topgoods {
    height: 30px;
    .goodnum {
      float: left;
      width: 400px;
    }
    .goodsname {
      float: right;
      width: 200px;
      margin-top: -5px;
    }
  }
  .record_line {
    margin: 10px 0;
    height: 1px;
    background-color: #e6e6e6;
  }
  .doing {
    color: blue;
  }
  
  .success {
    color: green;
  }
  .failure {
    color: red;
  }
  .operate_info {
    float: left;
  }
  .status—desc {
    float: right;
  }
  .pagination {
    float: right;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  
  .red_get_Detail{
    color: #f4222d;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
  }
  
  </style>
  